import { h } from 'vue';
import { ElPagination } from 'element-plus';
import { definePlugin } from '@/components/@comp/create-component';

export default definePlugin({
  name: 'listPagination',
  priority: 'CONTENT',
  extendProps: {
    columns: Array,
  },
  useMain(instance, props) {
    // console.log(props);

    const { request } = instance.getPlugin('request');

    // <el-pagination
    //   v-model:current-page="currentPage4"
    //   v-model:page-size="pageSize4"
    //   :page-sizes="[100, 200, 300, 400]"
    //   :size="size"
    //   :disabled="disabled"
    //   :background="background"
    //   layout="total, sizes, prev, pager, next, jumper"
    //   :total="400"
    //   @size-change="handleSizeChange"
    //   @current-change="handleCurrentChange"
    // />

    return {
      footer: () =>
        h(
          ElPagination,
          {
            total: request.data.value.total,
            background: true,
            size: 'small',
            pageSizes: [10, 20, 50, 100, 200, 500],
            layout: 'slot, sizes, prev, pager, next, jumper',
            style: { marginLeft: 'auto' },
          },
          {
            default: () => `总计 ${request.data.value.total} 项`,
          },
        ),
    };
  },
});
